<template>
	<view class="bg-white" style="width: 100%;height: 100vh;">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">选择圈话题</block>
		</cu-custom>
		<view class="padding solid-bottom" style="width: 100%;">
			<input v-model="title" placeholder="发起新的圈话题" style="width: 100%;"/>
		</view>
		<view class="padding">
			<text class="text-df text-grey">热门圈话题</text>
		</view>
		<view v-if="dataList.length>0" class="hot-topic-list">
			<view v-for="(item,index) in dataList" :key="index">
				<view class="padding-left padding-right-sm padding-top-sm padding-bottom-sm">
					<view @tap="chooseItem(item)" :class="'cu-tag radius '+[item.topic_id==topic.topic_id?'bg-blue text-white':'line-blue']">#{{item.title}}</view>
				</view>
			</view>
		</view>
		<view v-else class="flex justify-start align-center padding-left">
			<text class="text-gray">还没有热门话题哦～</text>
		</view>
		<view v-if="hasMore" class="flex justify-center align-center padding" style="width: 100%;">
			<text class="text-gray">查看更多</text>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top"
				style="width: 100%;">
			<button @tap="commitAction()" :class="'cu-btn round '+themeColor" style="width: 65%;">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		getTopicListByCircleId
	} from '@/api/api.js'
	export default {
		data() {
			return {
				topic:null,
				title:null,
				themeColor:this.ThemeColor,
				hasMore:true,
				circleId:null,
				pageIndex:0,
				pageSize:30,
				dataList: []
			}
		},
		onLoad(options) {
			if(options.circleId !== null && options.circleId !== undefined) {
				this.circleId = options.circleId
				getTopicListByCircleId(this.circleId,this.pageIndex,this.pageSize).then(res=>{
					this.dataList = res.data.list
					this.hasMore = res.data.list.length >= this.pageSize
				}).catch(error=>{
					
				})
			}
		},
		methods: {
			chooseItem(item) 
			{
				this.topic = item
			},
			commitAction() {
				if(this.topic == null) {
					if(this.title.length > 12) {
						uni.showToast({
							icon:'none',
							title:'话题不可以超过12个字'
						})
						return
					}
					if(this.title.length == 0) {
						uni.showToast({
							icon:'none',
							title:'请输入话题内容'
						})
						return
					}
				}
				const eventChannel = this.getOpenerEventChannel()
				if(this.topic !== null) {
					eventChannel.emit('finishChoose', {
						topic:this.topic.title,
						topicId:this.topic.topic_id
					});
				}else{
					eventChannel.emit('finishChoose', {
						topic:this.title
					});
				}
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style scoped>
.hot-topic-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
</style>